<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,initial-scale=1.0,width=device-width" />
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <title>订单结算</title>
    <link rel="stylesheet" type="text/css" href="../../../css/aui/aui.css" />
    <style>
        .site {
            position: relative;
            padding: 1.3rem .75rem;
            background-image: url(../../../image/img/hengtiao.png);
            background-repeat: no-repeat;
            background-position: bottom;
            background-size: 100% auto;
        }

        .site:before {
            content: '';
            width: 0.4rem;
            height: 0.4rem;
            position: absolute;
            top: 50%;
            right: 0.75rem;
            margin-top: -0.2rem;
            background: transparent;
            border: 1px solid #9A9A9A;
            border-top: none;
            border-right: none;
            z-index: 2;
            -webkit-border-radius: 0;
            border-radius: 0;
            -webkit-transform: rotate(-135deg);
            transform: rotate(-135deg);
        }

        .site .choice_site img {
            width: 1.2rem;
            display: inline-block;
            vertical-align: bottom;
        }

        .site .site_info {
            display: flex;
            flex-direction: column;
            font-size: .75rem;
        }

        .site .site_info .phone {
            margin-left: 2rem;
        }

        .site .site_info .site_text {
            font-size: .7rem;
            color: #A0A0A0;
        }

        .aui-card-list-header {
            color: black;
            justify-content: flex-start;
            font-size: .75rem;
            padding-bottom: 0;
        }

        .aui-card-list {
            margin-bottom: 0;
        }

        .aui-list {
            background-image: none;
        }

        .aui-list .aui-list-item {
            padding: 0;
            margin: .5rem .75rem 0;
            background-image: -webkit-linear-gradient(90deg, #EEEEEE, #EEEEEE 50%, transparent 50%);
        }

        .aui-list .aui-list-item-media {
            padding-right: .6rem;
        }

        .aui-list .describe {
            padding-right: 0px;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            align-items: stretch;
        }

        .aui-list .describe .aui-text-danger {
            font-size: .65rem;
            text-align: right;
            white-space: nowrap;
        }

        .aui-list .describe img {
            width: .85rem;
        }

        .aui-list .describe .aui-list-item-text {
            align-items: flex-end;
            color: black;
        }

        .aui-list .shop_number_btn {
            display: flex;
            align-items: flex-start;
        }

        .aui-list .shop_number_btn img {
            width: .95rem;
        }

        .aui-list .shop_number_btn .number {
            padding: 0 .5rem;
            font-size: .8rem;
        }

        .sub_price {
            display: flex;
            justify-content: space-between;
            padding: .9rem .75rem;
            border-bottom: .5rem solid #f6f6f6;
            border-top: 2px solid #F1F1F1;
            margin-top: .75rem;
        }

        #pay_type {
            margin-bottom: 3rem;
        }

        #pay_type img {
            width: 1rem;
            display: inline-block;
            vertical-align: sub;
            margin-right: .5rem;
        }

        #pay_type .aui-list {
            background-image: none;
        }

        #pay_type .aui-list .aui-list-item {
            padding-left: 0;
            margin: .5rem .75rem 0;
        }

        #pay_type .aui-list .aui-list-item-inner {
            align-items: center;
            -webkit-align-items: center;
            padding-right: 0.3rem;
        }

        #pay_type .aui-list .aui-list-item-right {
            max-width: 100%;
            font-size: 0.75rem;
        }

        #pay_type .aui-list.aui-list-in .aui-list-item {
            background-position: 0 bottom;
        }

        #pay_type .aui-list.aui-list-in .aui-list-item:last-child {
            background-image: none;
            border-bottom: .5rem solid #f6f6f6;
            margin: 0;
            padding: .5rem .75rem 0;
        }

        #footer {
            height: 2.25rem;
            line-height: 2.25rem;
            position: fixed;
            bottom: 0;
            width: 100%;
            padding-left: .75rem;
            background: white;
        }

        #footer:before {
            content: "";
            position: absolute;
            width: 100%;
            height: 1px;
            background: #F0F0F0;
            left: 0;
            top: 1px;
        }

        #footer .accounts {
            background: #F50000;
            color: white;
            text-align: center;
        }
    </style>
</head>

<body>
    <div id="app">
        <div class="site">
            <div class="choice_site" v-if="JSON.stringify(addr) == '{}'" @click="openAddr()"><img src="../../../image/icon/tianjia.png" alt="">选择收货信息</div>
            <div class="site_info" @click="openAddr()" v-else>
                <div>收货人：{{addr.contact}}<span class="phone">{{addr.contact_phone}}</span></div>
                <div class="site_text">{{addr.region}}{{addr.address}}</div>
            </div>
        </div>
        <div class="aui-content">
            <div class="aui-card-list">
                <div class="aui-card-list-header">
                    {{goodsData.shop_name}}
                </div>
                <div class="aui-card-list-content">
                    <ul class="aui-list aui-media-list">
                        <li class="aui-list-item">
                            <div class="aui-media-list-item-inner">

                                <div class="aui-list-item-media">
                                    <img :src="goodsData.pic">
                                </div>
                                <div class="aui-list-item-inner describe">
                                    <div class="aui-list-item-text">
                                        <div class="aui-ellipsis-2">{{goodsData.name}}</div>
                                        <div class="aui-text-danger">￥<span class="aui-font-size-16">{{goodsData.price}}</span></div>
                                    </div>
                                    <div class="aui-list-item-text">
                                        <div class="shop_number_btn">
                                            <div class="btn_minus" @click="minus()"><img src="../../../image/icon/jian.png" alt=""></div>
                                            <div class="number">{{num}}</div>
                                            <div class="btn-plus" @click="plus()"><img src="../../../image/icon/jia.png" alt=""></div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
        <div class="sub_price">
            <div>总计金额</div>
            <div class="aui-text-danger">￥{{total_price}}</div>
        </div>
        <div id="pay_type">
            <ul class="aui-list aui-list-in">
                <li class="aui-list-item">
                    <div class="aui-list-item-inner">
                        <div class="aui-list-item-title"><img src="../../../image/icon/weixin.png" alt="">微信支付</div>
                        <div class="aui-list-item-right"><input class="aui-radio" type="radio" value="1" v-model="pay_type"></div>
                    </div>
                </li>
                <li class="aui-list-item">
                    <div class="aui-list-item-inner">
                        <div class="aui-list-item-title"><img src="../../../image/icon/zhifubao.png" alt="">支付宝支付</div>
                        <div class="aui-list-item-right"><input class="aui-radio" type="radio" value="2" v-model="pay_type"></div>
                    </div>
                </li>
                <li class="aui-list-item">
                    <div class="aui-list-item-inner">
                        <div class="aui-list-item-title"><img src="../../../image/icon/yue.png" alt="">余额支付</div>
                        <div class="aui-list-item-right"><span style="color:black;margin-right:.4rem;">￥{{userInfo.wallet_balance}}</span><input class="aui-radio" type="radio" value="3" v-model="pay_type"></div>
                    </div>
                </li>
            </ul>
        </div>
        <footer class="aui-row" id='footer'>
            <div class="aui-col-xs-8">应付金额：￥{{total_price}}</div>
            <div class="aui-col-xs-4 accounts" @click="pay()">付款</div>
        </footer>
    </div>
</body>
<script src="../../../script/api.js" charset="utf-8"></script>
<script src="../../../script/aui/aui-dialog.js" charset="utf-8"></script>
<script src="../../../script/common/jquery-3.3.1.min.js" charset="utf-8"></script>
<script src="../../../script/common/common.js" charset="utf-8"></script>
<script src="../../../script/common/config.js" charset="utf-8"></script>
<script src="../../../script/common/vue.min.js" charset="utf-8"></script>
<script>
    apiready = function() {
        api.parseTapmode();
        vm.init();

    }
    var vm = new Vue({
        el: "#app",
        data: {
            userInfo: {},
            addr: {},
            goodsData: {},
            total_price: 0,
            pay_type: '',
            num: 1,
            pay_pass: 0
        },
        methods: {
            init() {
                this.userInfo = get_local("userInfo");
                this.gerUserInfo();
                // 监听地址
                this.eventListener();
                //获取默认地址
                this.userAddressGetDefault();
                //获取商品数据
                this.getGoodsData();
            },
            gerUserInfo() {
                var that = this;
                var userInfo = get_local('userInfo');
                // 获取用户信息--信息不完善
                _ajax(Config.api.UserGetUser, {
                    user_id: userInfo.user_id
                }, function(ret) {
                    if (ret.code === 200) {
                        ret.data.user_id = userInfo.user_id;
                        that.userInfo = ret.data;
                        set_local('userInfo', that.userInfo);
                        that.userInfo = get_local('userInfo');
                    }
                });
            },
            getGoodsData() {
                var self = this;
                _ajax(Config.api.CheckoutRunpay, {
                    mid: api.pageParam.mid,
                    gid: api.pageParam.id
                }, function(res) {
                    console.log(JSON.stringify(res));
                    if (res.code === 200) {
                        self.goodsData = res.data;
                        self.total_price = self.goodsData.price;
                    }
                })
            },
            //减
            minus() {
                if (this.num == 1) {
                    $toast('不能在少了');
                    return false;
                }
                this.num--;
                this.caculate();
            },
            //加
            plus() {
                this.num++;
                this.caculate();

            },
            //计算金额
            caculate() {
                this.total_price = this.goodsData.price * this.num;
            },
            userAddressGetDefault() {
                var that = this;
                _ajax(Config.api.UserAddressGetDefault, {
                    user_id: this.userInfo.user_id
                }, function(ret) {
                    if (ret.code === 200) {
                        that.addr = ret.data;
                    }
                });
            },
            openAddr() {
                var name = 'addr';
                var url = '../../my/addr/addr_win.html';
                open_w(name, url, {
                    type: 'select'
                });
            },
            eventListener() {
                var that = this;
                api.addEventListener({
                    name: 'selectAddr',
                }, function(ret, err) {
                    that.addr = ret.value;
                    console.log(JSON.stringify(that.addr));
                });
            },
            pay() {
                if (JSON.stringify(this.addr) == '{}') {
                    $toast('请选择地址');
                    return false;
                }
                if (this.pay_type == '') {
                    $toast('请选择支付方式');
                    return false;
                }

                if (this.pay_type == 3 && (this.userInfo.wallet_balance * 100 < this.total_price * 100)) {
                    $toast('余额不足');
                    return false;
                }

                if (this.pay_type == 3) {
                    var self = this;
                    var dialog = new auiDialog({});
                    dialog.prompt({
                        title: "支付密码",
                        text: '请输入支付密码',
                        type: 'password',
                        buttons: ['取消', '确定']
                    }, function(ret) {
                        if (ret.buttonIndex == 2) {
                            if (ret.text.length != 6) {
                                $toast('请输入六位数密码');
                                return false;
                            }
                            self.pay_pass = ret.text;
                            self.addOrder();
                        }
                    })
                } else {
                    this.pay_pass = 0;
                    this.addOrder();
                }
            },
            addOrder() {
                if (this.pay_type == 3 && (this.userInfo.wallet_balance * 100 < this.total_price * 100)) {
                    $toast("余额不足");
                    return;
                }

                var self = this;
                console.log(JSON.stringify({
                    mid: api.pageParam.mid,
                    gid: api.pageParam.id,
                    address_id: this.addr.address_id,
                    total_price: this.total_price,
                    user_id: this.userInfo.user_id,
                    type: this.pay_type,
                    num: this.num,
                    pay_pass: this.pay_pass
                }));
                _ajax(Config.api.CheckoutRunorder, {
                    mid: api.pageParam.mid,
                    gid: api.pageParam.id,
                    address_id: this.addr.address_id,
                    total_price: this.total_price,
                    user_id: this.userInfo.user_id,
                    type: this.pay_type,
                    num: this.num,
                    pay_pass: this.pay_pass
                }, function(ret) {
                    console.log(JSON.stringify(ret));
                    if (ret.code === 200) {
                        if (self.pay_type == 1) {
                            self.wxPay(ret.data);
                        } else if (self.pay_type == 2) {
                            self.aliPay(ret.data.orderInfo);
                        } else if (self.pay_type == 3) {
                            api.execScript({
                                name: 'main',
                                frameName: 'my',
                                script: 'vm.gerUserInfo()'
                            });
                            self.paySuccess();
                        }
                    } else {
                        $toast(ret.msgs);
                    }
                });
            },
            wxPay(orderInfo) {
                var self = this;
                var wxPay = api.require('wxPay');
                wxPay.payOrder(orderInfo, function(ret, err) {
                    if (ret.status) {
                        self.paySuccess();
                    } else {
                        $toast('支付失败，请尝试其他方式支付' + err.code);
                    }
                });
            },
            aliPay(orderInfo) {
                var self = this;
                var aliPay = api.require('aliPay');
                aliPay.payOrder({
                    orderInfo: orderInfo
                }, function(ret, err) {
                    if (ret.code == 9000) {
                        self.paySuccess();
                    } else {
                        $toast('支付失败，请尝试其他方式支付' + ret.code);
                    }
                });
            },
            paySuccess() {
                open_w('pay_ok_win', './pay_ok_win.html');
            }
        }
    });
</script>

</html>
